<template>
  <!-- <div>住户信息展示</div> -->
  <div class="container">
    <el-table
      :data="
        tableData.listdata.slice(
          (currentPage - 1) * pageSize,
          currentPage * pageSize
        )
      "
      stripestyle="width: 100%"
    >
      <el-table-column prop="plate" label="车牌号码" />
      <el-table-column prop="name" label="车主姓名" />
      <el-table-column prop="residence" label="车主住所" />
      <el-table-column prop="brand" label="汽车品牌" />
      <el-table-column prop="model" label="汽车型号" />
      <el-table-column prop="number" label="停车场位置号" />
      <el-table-column prop="purchase" label="购车地点" />
      <el-table-column prop="remarks" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            >&nbsp;编辑&nbsp;</el-button
          >
        </template>
      </el-table-column>
      <el-table-column>
        <template #header>
          <el-input
            v-model="search"
            size="small"
            placeholder="请输入查询内容(车主姓名))"
            @blur="handleSearch"
          />
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页区域 -->
    <div class="bottom">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.listdata.length"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <ModifyInformation />
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import link from "@/api/link.js";
import apiUrl from "@/api/url.js";
import { useStore } from "vuex";
import ModifyInformation from "@/components/CarComponents/ModifyInformation.vue";
let search = ref("");
let store = useStore();
// 分页
const currentPage = ref(1);
const pageSize = ref(5);
const handleSizeChange = (val) => {
  pageSize.value = val;
};
const handleCurrentChange = (val) => {
  currentPage.value = val;
};
let tableData = reactive({
  listdata: [],
});
// 搜索
let handleSearch = () => {
  link(apiUrl.HouseholdVehicles, "GET", {}, { name: search.value }).then(
    (resolve) => {
      tableData.listdata = resolve.data;
    }
  );
};
// 编辑
const handleEdit = (index, row) => {
  store.commit("SET_DIALOG", row);
};
// 获取数据
onMounted(() => {
  link(apiUrl.HouseholdVehicles).then((resolve) => {
    tableData.listdata = resolve.data;
  });
});
</script>

<style scoped lang="scss">
.container {
  width: 98%;
  margin: 20px auto;
  .bottom {
    margin: 5px;
    .el-pagination {
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
